<template>
	<view class="container">
		<NavBar title="OBD数据上传"/>
		<scroll-view scroll-y class="list" >
			<view class="blank-box">
				
			</view>
			<view class="equipment-item" v-for="(item, index) in equipmentList" :key="index">
			  <view class="item-header">
			    <view class="left-section">
			      <text class="equipment-title">{{ item.name }}</text>
			      <text class="equipment-id">{{ item.id }}</text>
			    </view>
			    <view class="status-tag" :class="item.status.type">
			      {{ item.status.text }}
			    </view>
			  </view>
			  
			  <image class="equipment-image" :src="item.image" mode="widthFix"></image>
			  
		
			  
			  <!-- 操作按钮 -->
			  <view class="action-buttons">
			    <view class="action-btn fuel-btn" @click="startUpload">点击上传数据</view>
			
			  </view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	export default {
		components:{NavBar},
		data() {
			return {
				equipmentList: [
				  {
				    name: '小松挖掘机',
				    id: 'BH-001',
				    status: { type: 'out', text: '已出场' },
				    image: '/static/sb_image1.png',
				    location: '陕西省西安市长安区沣东大道',
				    speed: '34Km/h',
				    time: '2024-05-01 14:25:36',
				    action: '离场',
				    duration: '1h34min',
				    driver: '张三',
				    phone: '130 2225 1564'
				  },
				  {
				    name: '小松挖掘机',
				    id: 'BH-001',
				    status: { type: 'in', text: '未出场' },
				    image: '/static/sb_image2.png',
				    location: '陕西省西安市长安区沣东大道',
				    speed: '0Km/h',
				    time: 'XXXX-XX-XX XX:XX:XX',
				    action: '离场',
				    duration: '0h0min',
				    driver: 'XXX',
				    phone: 'XXX XXXX XXXX'
				  },
				  {
				    name: '小松挖掘机',
				    id: 'BH-001',
				    status: { type: 'out', text: '已出场' },
				    image: '/static/sb_image1.png',
				    location: '陕西省西安市长安区沣东大道',
				    speed: '34Km/h',
				    time: '2024-05-01 14:25:36',
				    action: '离场',
				    duration: '1h34min',
				    driver: '张三',
				    phone: '130 2225 1564'
				  }
				],
			};
		},
		methods:{
			startUpload(){
				
					
			}
		}
	}
</script>

<style lang="scss" scoped>
*{
	box-sizing: border-box;
}
.list{
	height: 1450rpx;
	background-color: #E6EAF3;
	.blank-box{
		height: 20rpx;
	}
	.equipment-item{
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding: 24rpx 16rpx 24rpx 48rpx;
		background-color: #fff;
		border-radius: 32rpx;
		
		.item-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.equipment-title{
				font-size: 36rpx;
				font-weight: bold;
			}
			.status-tag{
				width: 100rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #F53F3F;
				background-color: #FFECE8;
				border-radius: 40rpx;
			}
			.in{
				background-color: #E8FFEA;
				color: #00B42A;
			}
			
		}
		.equipment-image{
			width: 440rpx;
			margin: 28rpx 104rpx;
		}
		.info-section{
			.info-row{
				display: flex;
				align-items: center;
			}
			.circle-icon{
				width: 32rpx;
				margin-left: 40rpx;
			}
			.info-text{
				flex: 1;
				font-size: 12px;
				font-weight: normal;
				color: #72767C;
				margin-left: 8rpx;
			}
		}
	}
	.action-buttons{
		display: flex;
		justify-content: right;
		.action-btn{
			width: 124rpx;
			height: 72rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 72rpx;
			border-radius: 72rpx;
			color: #39C75A;
			background-color: #E8FFEA;
		}
		.fuel-btn{
			margin-right: 20rpx;
			width: 224rpx;
			color: #165DFF;
			background-color: #E8F3FF;
		}
		.in-btn{
			background-color: #FFECE8;
			color: #F53F3F;
		}
	}
}
</style>
